<template>
    <div :class="fitem.styleType">
         <!-- 热点精选 -->
        <template v-if="fitem.type == 'hot-list'">
            <div class="item-wrap" v-if="fitem.list.length>0">
                <div class="list-wrap">
                    <div class="list"> 
                        <a :href="child.url" class="item-hot" v-for="child in fitem.list" :key="child.id">
                            <div class="cont">
                                <p class="tag">
                                    <i class="uicon uicon-hot"></i>
                                    <span>热点精选</span>
                                </p>
                                <div class="img">
                                    <img :src="child.src" >
                                </div>
                                <div class="wrap">
                                    <span class="type" v-if="child.type">{{child.type}}</span>
                                    <p class="tit">
                                        <slot name="title">{{child.title}}</slot>
                                    </p>
                                    <div class="info">
                                        <div class="tags">
                                            <span class='item-source' v-if='item.source'>{{item.source}}</span>
                                            <span class='item-date' v-if='item.issue_date'>{{item.issue_date}}</span>
                                            <span>{{child.view}}阅</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div><!-- end list -->
                </div>

                <div class="more">
                    <a :href="fitem.url">查看更多热点事件<i class="uicon uicon-more"></i></a>
                </div>
            </div>
        </template>

        <!-- 专题 -->
        <template v-if="fitem.type == 'special'">
            <a :href="fitem.url" class="item-special">
                <div class="item-wrap">
                    <p class="tit">
                        <label>专题</label><span><slot name="title">{{fitem.title}}</slot></span>
                    </p>
                    <div class="img">
                        <img :src="fitem.src" >
                    </div>
                    <div class="info">
                         <div class="tags">
                             <span style="color:red" v-if="item.is_top == 1">置顶</span>
                            <span class='item-source' v-if='item.source'>{{item.source}}</span>
                            <span class='item-date' v-if='item.issue_date'>{{item.issue_date}}</span>
                            <span>{{item.view}}阅</span>
                        </div>
                    </div>
                </div>
            </a>
        </template>
        
        <!-- 单图右侧布局 -->
        <template v-if="fitem.type == 'normal'">
            <a :href="fitem.url+'&token='+token" class="item-normal">
                <div class="item-wrap">
                    <div class="cont">
                        <p class="tit"><i class="uicon uicon-hot" v-if="item.is_hot == 1"></i> <slot name="title">{{fitem.title}}</slot></p>
                        <div class="info">
                             <div class="tags">
                                <span style="color:red" v-if="item.is_top == 1">置顶</span>
                                <span class="item-source" v-if="item.source">{{item.source}}</span>
                                <span class="item-date" v-if="item.issue_date">{{item.issue_date}}</span>
                                <span>{{item.view}}阅</span>
                            </div>
                            <a href="javascript:;" @click.stop.prevent.self="close(item,$event)" class="close"  v-if="fitem.close"></a>
                        </div>
                    </div>
                    <div class="img">
                        <img :src="fitem.src" >
                    </div>
                </div>
            </a>
        </template>

        <!-- 多图 -->
        <template v-if="fitem.type == 'grid'">
            <a :href="fitem.url" class="item-grid">
                <div class="item-wrap">
                    <p class="tit">
                        <slot name="title">{{fitem.title}}</slot>
                    </p>
                    <div class="list-img">
                        <div class="img" v-for="(img,index) in fitem.src" :key="index">
                            <img :src="img" >
                        </div>
                    </div>
                    <div class="info">
                        <div class="tags">
                            <span style="color:red" v-if="item.is_top == 1">置顶</span>
                            <span class='item-source' v-if='item.source'>{{item.source}}</span>
                            <span class='item-date' v-if='item.issue_date'>{{item.issue_date}}</span>
                            <span>{{item.view}}阅</span>
                        </div>
                        <a href="javascript:;" @click.stop.prevent.self="close(item,$event)" class="close"  v-if="fitem.close"></a>
                    </div>
                </div>
            </a>
        </template>
        
        <!-- 视频 -->
        <template v-if="fitem.type =='video'">
            <a :href="fitem.url" class="item-video">
                <div class="item-wrap">
                    <p class="tit"><slot name="title">{{fitem.title}}</slot></p>
                    <div class="video"  @click.stop.prevent.self>
              
                    <div class="play" v-if="fitem.play_status < 2" @click.stop.prevent="$emit('playVideo',$event,fitem)">
                         <i class="uicon uicon-play" v-show="fitem.play_status == 0"></i>
                        <span v-show="fitem.play_status == 0">{{fitem.video_time}}</span>
                        <img :src="fitem.src" v-show="fitem.play_status == 0">
                        <i class="loading" v-show="fitem.play_status == 1"></i>
                    </div>
                   
                    <video
                        v-show="fitem.play_status !== 0"
                        @volumechange="$emit('volumechange',$event)"
                        @canplay="fitem.play_status = 2"
                        playsinline="isiPhoneShowPlaysinline" 
                        webkit-playsinline 
                        x-webkit-airplay="" 
                        preload="none" 
                        controls="true"
                        controlsList="nodownload"
                        :poster="item.src"
                        :muted='params.muted'
                        :src="item.video">
                    </video>
                    </div>
                    <div class="info">
                        <div class="tags">
                            <span style="color:red" v-if="item.is_top == 1">置顶</span>
                            <span class='item-source' v-if='item.source'>{{item.source}}</span>
                            <span class='item-date' v-if='item.issue_date'>{{item.issue_date}}</span>
                            <span>{{item.view}}阅</span>
                        </div>
                        <a href="javascript:;" @click.stop.prevent.self="close(item,$event)" class="close"  v-if="fitem.close"></a>
                    </div>
                   
                </div>
            </a>
        </template>

        <!-- 单张大图 -->
        <template v-if="fitem.type == 'single'">
            <a :href="fitem.url" class="item-single">
                <div class="item-wrap">
                    <p class="tit">
                       <slot name="title">{{fitem.title}}</slot>  
                    </p>
                    <div class="img">
                        <img :src="fitem.src" >
                        <span>{{fitem.atlas.length}}图</span>
                    </div>
                    <div class="info">
                        <div class="tags">
                            <span style="color:red" v-if="item.is_top == 1">置顶</span>
                            <span class='item-source' v-if='item.source'>{{item.source}}</span>
                            <span class='item-date' v-if='item.issue_date'>{{item.issue_date}}</span>
                            <span>{{item.view}}阅</span>
                        </div>
                        <a href="javascript:;" @click.stop.prevent.self="close(item,$event)" class="close"  v-if="fitem.close"></a>
                    </div>
                </div>
            </a>
        </template>

        <!-- 一周热点 -->
        <template v-if="fitem.type == 'week-hot'">
            <a :href="fitem.url" class="item-single">
                <div class="item-wrap">
                    <div class="img">
                        <img :src="fitem.src" >
                    </div>
                    <p class="tit">
                        <slot name="title">{{fitem.title}}</slot>  
                    </p>
                </div>
            </a>
        </template>

        <!-- 视频列表和视频详情布局 -->
        <template v-if="fitem.type == 'video-item'">
            <a :href="fitem.url" _class="video-item">
                <div class="player" @click.stop.prevent="">
                    <div class="player-wrap" v-if="item.play_status < 2" @click.stop.prevent="$emit('playVideo',$event,item)">
                         <i class="uicon uicon-play" v-show="item.play_status == 0"></i>
                        <img :src="fitem.src" class="bg" v-show="item.play_status == 0">
                        <i class="loading" v-show="item.play_status == 1"></i>
                    </div>
                   
                    <video
                        v-show="item.play_status !== 0"
                        @volumechange="$emit('volumechange',$event)"
                        @canplay="item.play_status = 2"
                        playsinline="isiPhoneShowPlaysinline" 
                        webkit-playsinline 
                        x-webkit-airplay="" 
                        preload="none" 
                        controls="true"
                        controlsList="nodownload"
                        :poster="item.src"
                        :muted='params.muted'
                        :src="item.video">
                    </video>
                </div>
                <div class="cont">
                    <p class="tit" v-show="fitem.play_status == 0"><slot name="title">{{fitem.title}}</slot></p>
                </div>
                <div class="info" @click="goDetail()">
                    <p>
                        <span class="sname">
                            <div class="slogo">
                                <img :src="fitem.logo_url" />
                            </div>
                            <span>{{fitem.source.name}}</span>
                        </span>
                        <span>{{fitem. issue_date}}</span>
                    </p>
                    <p class="tool">
                        <span><i class="uicon uicon-view"></i> {{item.view}}</span>
                        <span><i class="uicon uicon-bar-more" @click.stop.prevent.capture="$emit('more',item)"></i></span>
                    </p>
                </div>
            </a>
        </template>
    </div>
</template>
<script>
export default {
    name:'ui-item',
    props:{
        item:Object,
        params:Object
    },
    data(){
        return {  
            token:localStorage.getItem("token")          
        }
    },
    computed: {
        fitem: function () {
            if(!this.item) return {}
            this.item.view = this.numFrom(this.item.view)
            this.item.styleType = 'list-item';
            switch (this.item.type) {
                case 'hot-list':
                this.item.styleType = 'hot-list';
                break;
                case 'video-item':
                this.item.styleType = 'video-item';
                break;
                case 'week-hot':
                this.item.styleType = 'week-hot';
                break;
            }
           
            return this.item;
        }
    },
    methods:{
        goDetail (e) {
            this.$utils.caches.set('pagePosition', scrollY, 'session');
        },
        close(item,e){
            this.$emit('close',[item,e])
        },
        /* n 数字
        * f 保留多少位数字 默认1位
        */
        numFrom (n, f) {
            f = f || 1  
            if(typeof n == 'string' && n.match('%') || n == undefined) {
                return n;
            }      

            let yi = n / 100000000
            let wan = n / 10000

            if(yi > 1 || yi < -1) {
                if((yi > 0 && yi < 9) || (yi > -9 && yi < 0)) {
                    return yi.toFixed(1) + '亿'
                } else {            
                    return yi.toFixed(f) + '亿'
                }
            }else if (wan > 1 || wan < -1){
                if((wan > 0 && wan < 9) || (wan > -9 && wan < 0)) { 
                    return wan.toFixed(1) + '万'
                }else {
                    return wan.toFixed(f) + '万'
                }
            } else {
                let len
                let arr  
                arr = (n / 1).toString().split(".")

                if(arr.length > 1) {
                    len = arr[1].length
                }

                if(len >= 2) {
                    return (n/1).toFixed(f)
                } else {
                    return (n/1)
                }
            }
        }
    }

}
</script>
<style lang="less">
    
    .list-item,
    .hot-list {
        .img,.video {
            border-radius:4px;
            background-color:#f6f6f6;
            overflow: hidden;
            img ,video{
                display: block;
                width:100%;
                height:100%;
            }
        }

        .info {
            display:flex;
            justify-content: space-between;
            align-items: center;
            font-size:22px;
            line-height: 1;
            
            .tags {
                display:flex;
                align-items: center;
                flex:1;
                overflow: hidden;
            }
            span {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                flex-shrink: 0;
                flex-grow:0;
                &.item-source {
                    flex-shrink: 1
                }
            }
            span + span {
                margin-left:12px;
            }

        }

        // & + .list-item {
        //     .item-wrap {
        //         border-top:1px solid #e3e3e3;
        //     }
        // }
    }
    .list-item {
        display:flex;
        padding:24px 24px 0;
        background-color:#fff;
        .loading {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 80px;
            height: 80px;
            border: 2px solid #fff;
            border-radius: 50%;
            border-bottom-color: transparent;
            animation: loading 1s infinite linear;
        }
        &>a {
            display: flex;
            width:100%;
        }
        .item-wrap {
            width:100%;
        }
        .tit {
            font-size:34px;
            line-height:52px;
            color:#282828;
        }
        
        .info {
            color:#919191;
            span.item-source {
                color:#a98273
            }
        }
        a {
            &:active {
                p.tit {
                    color:#919191;
                }
            }
        }
        .item-wrap {
            border-bottom:1px solid #e3e3e3;
        }

        &:last-child .item-wrap {
            border-bottom:none;
        }
        
        .close {
            display: block;
            padding-left:12px;
            box-sizing: content-box;
            color:#dcdcdc;
            width:20px;
            height:20px;
            position:relative;
            overflow: hidden;
            
            &::before,
            &::after {
                content:'';
                position: absolute;
                background-color:#dcdcdc;
                // transform: translate(-50%,-50%);
            }

            &::before {
                width:2px;
                height:20px;
                right:10px;
                transform: translateX(50%) rotate(45deg);
            }
            &::after {
                top:10px;
                width:20px;
                height:2px;
                transform: translateY(-50%) rotate(45deg);
            }
        }
    }

    .week-hot {
        margin: 20px 0 0 0;
        background: #fff;
        padding: 20px 24px 0;
        
        .item-single {
            .img{
                margin: 0;
                height: 240px;
                img {
                    border-radius:4px;
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .item-single {
            .item-wrap {
                padding-bottom: 0;
            }
        }

        .tit {
            font-size: 34px;
            line-height: 38px;
            padding: 19px;
        }
    }

    .item-special .tit label,
    .item-hot .wrap .type{
        display: inline-block;
        padding:0px 7px;
        background-color:#e64a19;
        border-radius:4px;
        color:#fff;
        font-size:22px;
        line-height: 32px;
        margin-right:12px;
    }

    .item-special {
        padding-bottom:0;

        .tit {
            label,span {
                vertical-align: middle;
            }
        }
        .img {
            margin:18px auto 22px;
            height:240px;

            img {
                height:100%;
            }
            
        }

        .info {
            padding-bottom:18px;
        }
    }

    .hot-list {
        padding-top:24px;
        margin-bottom:10px;
        background-color:#fff;
        .list-wrap {
            overflow: hidden;
        }
        .list {
            overflow-x: auto;
            overflow-y: hidden;
            height:404px;
            white-space: nowrap;
            font-size:0;
            -webkit-overflow-scrolling : touch;
            -webkit-user-select: none;
            padding-bottom:40px;
            margin-bottom:-40px;
        }

        .img {
            position: relative;
            &::after {
                content:'';
                position: absolute;
                top:0;
                left:0;
                right:0;
                bottom:0;
                background-color:rgba(0,0,0,.2);
            }
        }

        .more {
            height: 92px;
            &,a {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            a {
                color:#5a4640;
                font-size:30px;
                i {
                    margin-left:10px;
                }
            }
            
        }
    }

    .item-hot {
        display: inline-block;
        margin-left:8px;
        width:702px;
        height:100%;
        
        &:first-child {
            margin-left:24px;
        }
        &:last-child {
            margin-right:24px;
        }
        .cont {
            position:relative;
            padding:0 24px;
            flex-grow:0;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width:100%;
            height:100%;
            overflow: hidden;
        }
        .tag,.wrap {
            position: relative;;
            z-index:2;
            left:0;
        }
        .tag {
            display: flex;
            align-items: center;
            top:32px;
            font-size:34px;
            color:#fff;

            i {
                margin-right:16px;
            }
        }
        .tit {
            font-size:36px;
            line-height: 50px;
            margin-bottom:10px;
        }
        
        .type {
            margin-bottom:10px;
        }
        .wrap {
            padding-bottom:24px;
            bottom:0;
            color:#fff;
            white-space: normal;
        }
        .img {
            position: absolute;
            top:0;
            left:0;
            width: 100%;
            height:100%;
        }
    }

    .item-normal {
        .item-wrap {
            display: flex;
            padding-bottom:24px;
        }
        .tit {
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        .info {
            margin-top:40px;
        }
        .cont {
            flex:1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
        }
        .img {
            margin-left:20px;
            width:230px;
            height:164px;
        }
        .uicon-hot{
            margin-top:-5px;
            display: inline-block;
        }
    }

    .item-grid {
        .item-wrap {
            padding-bottom:24px;
        }
        .list-img {
            display:flex;
            margin:18px 0;
        }
        .img {
            flex:0 0 230px;
            // width:230px;
            height:164px;
        }
        .img + .img {
            margin-left:6px;
        }
        .tit{
           overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical; 
        }
    }
    
    .item-video {
        padding-bottom:0;
        .item-wrap {
            padding-bottom:18px;
        }
        .video {
            position:relative;
       
            height:396px;
            margin:18px 0;
            .play {
                position: relative;
                z-index:2;
                display: flex;
                justify-content: center;
                align-items: center;
                width: 100%;
                height:100%;

                span {
                    position: absolute;
                    right:16px;
                    bottom:20px;
                    padding:0 16px;
                    height:32px;
                    line-height: 32px;
                    color:#fff;
                    font-size:22px;
                    border-radius: 20px;
                    background-color:rgba(0,0,0,.3);
                }
            }
            video,img {
                position: absolute;
                top:0;
                left:0;
                height:100%;
            }
            i {
                z-index:2;
            }
        }
    }

    .item-single {
        .item-wrap {
            padding-bottom:18px;
        }
        .img {
            position: relative;
            margin: 18px 0;
            height:368px;

            span {
                position: absolute;
                left:24px;
                bottom:28px;
                font-size:22px;
                color:#fff;
                text-shadow: 0 1px  0 rgba(0,0,0,.5);

            }
        }
    }
    
    .video-item {
        position:relative;
        background-color:#fff;
        .player {
            position: relative;
            display:flex;
            padding-top:100 * 211/375%;
            overflow:hidden;
            img {
                width:100%;
                height:100%;
            }
            .player-wrap {
                z-index:3;
                margin:auto;
            }
            .player-wrap,img,video,i{
                position: absolute;
                top:0;
                left:0;
                right:0;
                bottom:0;
            }
            video {
                width:100%;
                height:100%;
                display: block;
            }
            i {
                z-index:2;
                margin:auto;
            }
            
        }

        .cont {
            position:absolute;
            z-index:2;
            top:0;
            left:0;
            width:100%;
            padding:24px;
            font-size:34px;
            color:#fff;
            line-height: 54px;
            z-index: 99;
            .tit {
                position: relative;
                z-index: 2;
            }
            &::before {
                content: '';
                position: absolute;
                top:0;
                left:0;
                right:0;
                bottom:0;
                background-image: linear-gradient(to bottom,rgba(0,0,0,.8),rgba(0,0,0,0))
            }
        }
        .info {
            padding-left:24px;
            height:90px;
            justify-content: space-between;
            &,&>p {
                display: flex;
                align-items: center;
            }

            p {
                height:100%;
                color:#919191;
                font-size:22px;
                &:first-child {
                    flex:1;
                    span {
                        font-size:24px;
                    }

                     .sname {
                         &,.slogo {
                            display: flex;
                            align-items: center;
                         }
                         
                         .slogo {
                             justify-content: center;
                             margin-right:20px;
                             width:58px;
                             height:58px;
                             padding:10px;
                             border-radius: 50%;
                             overflow: hidden;
                             border:1px solid #efefef;
                         }
                         img {
                             display: block;
                             width:40px;
                             height:100%;
                         }
                        color:#282828;
                        font-size: 30px;
                    }
                }

                span + span {
                    margin-left:20px;
                }
                .uicon-bar-more-w {
                    margin-left:30px;
                }
            }
        }
        .tool {
            span {
                display:flex;
                justify-content: center;
                align-items: center;
                height:100%;
                
            }
            .uicon-view {
                margin-right:.5em;
            }
            span:last-child {
                padding-right:24px;
            }
        }
    }
</style>


